<template>
 <view>
  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
  

  <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">

    <view class="left-section" @click="handleBack">
      <image 
        v-if="showBack" 
         src="/static/images/left_arrow.png"
        class="back-icon" 
        mode="aspectFit"
      />
    </view>


    <view class="right-section">
      <text class="username">{{ username }}</text>
      <image 
         :src="avatar || '/static/images/default-avatar.png'" 
        class="avatar" 
        mode="aspectFill"
		 @click="handleAvatarClick"
      />
    </view>
  </view>
  </view>
</template>

<script>
export default {
  props: {
    showBack: { // 是否显示返回按钮
      type: Boolean,
      default: true
    },
    username: { // 用户名
      type: String,
      default: '未登录'
    },
    avatar: String // 头像路径
  },
  data() {
    return {
      statusBarHeight: 0, // 状态栏高度
      navBarHeight: 44    // 导航栏标准高度（iOS）
    };
  },
  mounted() {
    // 获取设备信息[1,5](@ref)
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // Android 导航栏高度适配
    if (systemInfo.platform === 'android') {
      this.navBarHeight = 48;
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
	   // 新增头像点击处理方法
	    handleAvatarClick() {
	      uni.navigateTo({
	        url: '/pages/mine/info/index'  // 根据实际路径修改
	      });
	    }
  }
};
</script>

<style lang="scss" scoped>
.status-bar {
  background-color: #FFFFFF;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);

  .left-section {
    .back-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .right-section {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .username {
      font-size: 28rpx;
      color: #333;
    }

    .avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      border: 1rpx solid #eee;
    }
  }
}
</style>